<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客-本子</title>
  <link rel="stylesheet" href="css/book.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<div class="content">
  <div id="book-mainBox" class="clearfix" style="margin-top: 10px; position: relative;padding-bottom: 30px">

    <div class="book-box box-clone clearfix" style="opacity:1">
      <div class="book-pic clearfix" style="width: 190px;">

        <a href="sa"><div style="cursor: pointer"  class="book-newPost">发新帖</div></a>

        <div class="book-category clearfix">
          <div>分类:</div>

          <a href="?tag="><div class="book-category-icon category-tab @if($tag == '') active @endif">全部</div></a>
          <a href="?tag=动漫画集"><div class="book-category-icon category-tab @if($tag == '动漫画集') active @endif">动漫画集</div></a>
          <a href="?tag=杂志画集"><div class="book-category-icon category-tab @if($tag == '杂志画集') active @endif">杂志画集</div></a>
          <a href="?tag=网站推荐"><div class="book-category-icon category-tab @if($tag == '网站推荐') active @endif">网站推荐</div></a>
          <a href="?tag=游戏CG"><div class="book-category-icon category-tab   @if($tag == '游戏CG') active @endif">游戏CG</div></a>
          <a href="?tag=个人杂图"><div class="book-category-icon category-tab @if($tag == '个人杂图') active @endif">个人杂图</div></a>
        </div>
        <div class="book-category clearfix" style="height: 30px;">
          <div>筛选:</div>
          <div class="book-category-icon active">全部</div>
          <div class="book-category-icon">人气</div>
        </div>

        <div class="book-category clearfix" style="height: 110px;">
          <div>排序:</div>
          <a href="?tag=asda&sort="><div class="book-category-icon {% if sort == '' %}active{% endif %}">按发表时间</div></a>

          <div class="book-category-icon">按回复时间</div>
          <a href="?tag=asda&sort=hot"><div class="book-category-icon {% if sort == 'hot' %}active{% endif %}">按查看次数</div></a>

          <div class="book-category-icon">按回复次数</div>
          <div class="book-category-icon">随机</div>
        </div>
      </div>
    </div>




    <div  class="book-box" style="opacity: 1">
    <div class="book-pic">
      <a href="book_detail.html"><img src="images/5.jpg" alt="">
        <div class="book-title">{{$item->title}}</div></a>
      <div class="book-icon clearfix">
        <div class="icon-eye-open">{{$item->see}}</div>
        <div class="icon-comments-alt">评论：55555</div>
      </div>
      <div class="book-username">
        <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
        <div >{{$item->user->info}}</div>
      </div>
    </div>
  </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/6.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/7.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/8.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/9.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/10.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/11.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/12.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/13.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/14.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>


    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/15.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/4.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

    <div  class="book-box" style="opacity: 1">
      <div class="book-pic">
        <a href="book_detail.html"><img src="images/3.jpg" alt="">
          <div class="book-title">{{$item->title}}</div></a>
        <div class="book-icon clearfix">
          <div class="icon-eye-open">{{$item->see}}</div>
          <div class="icon-comments-alt">评论：55555</div>
        </div>
        <div class="book-username">
          <a href="{{url('user/content/'.$item->user->id)}}"><img src="images/avatar.png" alt=""></a>
          <div >{{$item->user->info}}</div>
        </div>
      </div>
    </div>

  </div>
</div>


</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>

<script>
  $(function(){
    setTimeout(function(){
      waterfall();
    },100);

    setTimeout(function () {
      var $lastBox = $('#book-mainBox .book-box').last();
      var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
      $('#book-mainBox').animate({
        height:lastBoxDis - 20
      },600) ;
    },700);

    $(window).on('scroll',function(){
      waterfall();
    })
  });

  function waterfall(){
    var main = $('#book-mainBox');
    var $boxs = $('#book-mainBox .book-box');
    var w = $boxs.eq(1).outerWidth();
    var cols = Math.floor(main.width()/w);
    var hArr = [];
    $boxs.each(function(index,value){
      var h = $boxs.eq(index).outerHeight();
      if (index < cols){
        hArr[index] = h;
        $(value).animate({
          opacity:1,
        },600)
      }else{
        var minH = Math.min.apply(null,hArr);
        var minHIndex = $.inArray(minH,hArr);
        $(value).css({
          position:'absolute',
        }).animate({
          top:minH,
          left:minHIndex*w,
          opacity:1,
        },600);
        hArr[minHIndex]+=$boxs.eq(index).outerHeight();

      }
    });
  }



</script>
</html>